<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>杨少靖-2023030103071</title>
    <style>
      body {
        font-size: 14px;
        font-family: "Microsoft YaHei", "SimSun";
        background: url("images/bg_body.png") repeat-x #ecfbf4;
      }
      a {
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
        cursor: pointer;
      }
      .inner_c {
        width: 1000px;
        margin: 0 auto;
      }
      .left {
        float: left;
      }
      .right {
        float: right;
      }
      #header {
        height: 80px;
        padding-top: 10px;
      }
      #header_logo {
        margin-top: 10px;
        padding-right: 20px;
      }
      #header_title {
        margin-top: 20px;
        padding-left: 20px;
        border-left: 2px solid white;
        color: #f1f5fa;
      }
      #header_link {
        margin-top: 20px;
        color: #f1f5fa;
      }
      #header_link a {
        color: #f1f5fa;
        font-size: 16px;
        padding: 0 20px;
      }
      #nav ul {
        height: 34px;
        background: url(images/bg_nav.png) repeat-x;
        display: flex;
        list-style: none;
      }
      #nav li {
        width: 9%;
        text-align: center;
      }
      #nav a {
        color: #f1f5fa;
      }
      #banner {
        height: 433px;
        width: 1000px;
      }
      #contents div {
        display: block;
      }
      #news {
        width: 65%;
        float: left;
      }
      #notice {
        width: 32%;
        float: right;
      }
      .title {
        height: 20px;
        background: url(images/bg_nav.png) repeat-x;
      }
      .title span {
        float: left;
        color: white;
      }
      .title a {
        float: right;
        color: white;
      }
      #news_content {
        width: 420px;
      }
      #news_content ul {
        list-style: none;
      }
      #news_content li {
        height: 29px;
        width: 370px;
        border-bottom: 1px solid black;
      }
      #news_content li span {
        float: right;
      }
      #news_content li a {
        float: left;
        color: rgb(0, 184, 245);
      }
      #notice_content {
        width: 100px;
      }
      #notice_content ul {
        list-style: none;
      }
      #notice_content li {
        height: 29px;
        width: 260px;
        border-bottom: 1px solid black;
      }
      #notice_content li span {
        float: right;
      }
      #notice_content li a {
        float: left;
        color: rgb(0, 184, 245);
      }
      #link_inner ul {
        width: auto;
        list-style: none;
      }
      #link_inner li {
        border: 2px solid white;
        width: 300px;
        display: inline-block;
      }
      #link_outer ul {
        padding: 0px;
        background-color: white;
        list-style: none;
      }
      #link_outer ul li {
        display: inline-block;
        height: 20px;
        padding-left: 10px;
      }
      #link_outer ul li a {
        color: gray;
      }
    </style>
  </head>
  <body>
    <div id="header" class="inner_c">
      <div id="head_logo" class="left">
        <img src="images/logo.png" alt="logo" />
      </div>
      <div id="header_title" class="left">计算机学院</div>
      <div id="header_link" class="right">
        <span><a href="">学校首页</a></span>
        <span>|</span>
        <span><a href="">联系我们</a></span>
      </div>
    </div>
    <div id="nav" class="inner_c">
      <ul>
        <li><a href="">首页</a></li>
        <li><a href="">学院简介</a></li>
        <li><a href="">专业介绍</a></li>
        <li><a href="">实验室介绍</a></li>
        <li><a href="">师资队伍</a></li>
        <li><a href="">党建工作</a></li>
        <li><a href="">学生园地</a></li>
        <li><a href="">就业专栏</a></li>
        <li><a href="">资料下载</a></li>
        <li><a href="">科技竞赛</a></li>
        <li><a href="">IEET 验证</a></li>
      </ul>
    </div>
    <div id="banner" class="inner_c">
      <img src="images/banner1.png" alt="banner" />
    </div>
    <div id="contents" class="inner_c">
      <div id="news">
        <div class="title">
          <span>学院动态</span>
          <a href="">更多</a>
        </div>
        <div id="news_img" class="left" style="width: 200px; height: 144px">
          <img src="images/news1.jpg" alt="" />
        </div>
        <div id="news_content" class="right">
          <ul>
            <li><a href="">aaa</a><span> 2021-03-21</span></li>
            <li><a href="">bbb</a><span> 2022-12-11</span></li>
            <li><a href="">ccc</a><span> 2022-03-12</span></li>
            <li><a href="">ddd</a><span> 2022-05-12</span></li>
            <li><a href="">eee</a><span> 2022-07-12</span></li>
            <li><a href="">fff</a><span> 2022-09-12</span></li>
            <li><a href="">ggg</a><span> 2022-11-12</span></li>
            <li><a href="">hhh</a><span> 2022-12-12</span></li>
          </ul>
        </div>
      </div>
      <div id="notice">
        <div class="title">
          <span>通知公告</span>
          <a href="">更多</a>
        </div>
        <div id="notice_content">
          <ul>
            <li><a href="">aaa</a><span> 2021-03-21</span></li>
            <li><a href="">bbb</a><span> 2022-12-11</span></li>
            <li><a href="">ccc</a><span> 2022-03-12</span></li>
            <li><a href="">ddd</a><span> 2022-05-12</span></li>
            <li><a href="">eee</a><span> 2022-07-12</span></li>
            <li><a href="">fff</a><span> 2022-09-12</span></li>
            <li><a href="">ggg</a><span> 2022-11-12</span></li>
            <li><a href="">hhh</a><span> 2022-12-12</span></li>
          </ul>
        </div>
      </div>
    </div>
    <div id="link_inner" class="inner_c">
      <ul>
        <li>
          <a href=""><img src="images/link1.png" alt="" /></a>
        </li>
        <li>
          <a href=""><img src="images/link2.png" alt="" /></a>
        </li>
        <li>
          <a href=""><img src="images/link3.png" alt="" /></a>
        </li>
      </ul>
    </div>
    <div id="link_outer" class="inner_c">
      <div class="title">
        <span>友情链接</span>
      </div>
      <ul>
        <li><a href="">外部链接</a></li>
        <li><a href="">外部链接</a></li>
        <li><a href="">外部链接</a></li>
        <li><a href="">外部链接</a></li>
      </ul>
    </div>
    <div id="footer" style="border-top: 2px solid #c90">
      <div>
        <p style="text-align: center">Copyright © 电子科技大学中山学院</p>
        <p style="text-align: center">网站备案号： 粤 ICP 备 05008828 号</p>
      </div>
    </div>
  </body>
</html>
